<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>用户管理</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="/assets/css/ready.css">
    <link rel="stylesheet" href="/assets/css/demo.css">
    <link rel="stylesheet" href="/assets/css/mystyle.css">
</head>
<body>
<div class="wrapper">
    <div th:replace="~{index::topbar}"></div>
    <div th:replace="~{index::sidebar(activeUri='/user/manager')}"></div>
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <h4 class="page-title">用户添加</h4>
                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-text text-left">选择分组和人数（批量）</div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-5">
                                        <select class="form-control input-fixed" id="user_group">
                                        </select>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="number" class="form-control" placeholder="5" id="userNumber">
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-primary btn-round" id="generateUser">生成</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-text text-center">单用户添加</div>
                            </div>
                            <div class="card-body">
                                <!-- <div class="row">
                                    <div class="col-md-9">
                                    <div class="">
                                        <input type="file" class="form-control-file">
                                    </div>
                                </div> -->
                                <div class="col-md-12 text-center">
                                    <button class="btn btn-primary btn-round" data-toggle="modal"
                                            data-target="#AddUser" id="addUserBtn">ADD
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title text-center">用户列表</div>
                            <form class="form-inline pull-right" action="">
                                <div class="input-group">
                                    <input type="text" placeholder="Search ..." class="form-control">
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <i class="la la-search search-icon"></i>
                                        </span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card-body">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th scope="col" class="text-md-center">ID</th>
                                    <th scope="col" class="text-md-center">用户名</th>
                                    <th scope="col" class="text-md-center">账户</th>
                                    <th scope="col" class="text-md-center">生成时间</th>
                                    <th scope="col" class="text-md-center">邮箱</th>
                                    <th scope="col" class="text-md-center">联系方式</th>
                                    <th scope="col" class="text-md-center">所属组</th>
                                    <th scope="col" class="text-md-center">操作</th>
                                    >
                                </tr>
                                </thead>
                                <tbody id="user_table">
                                <tr th:each="data,iterStat:${datalist}">
                                    <!-- <td>
                                        <label class="form-check-label">
                                            <input class="form-check-input" type="checkbox" value="">
                                            <span class="form-check-sign"></span>
                                        </label>
                                    </td> -->
                                    <td th:if="${data.user.userID}!=100" th:text="${data.user.userID}" class="text-md-center"></td>
                                    <td th:if="${data.user.userID}!=100" th:text="${data.user.userName}" class="text-md-center"></td>
                                    <td th:if="${data.user.userID}!=100" th:text="${data.user.userAccount}" class="text-md-center"></td>
                                    <td class="text-md-center was-validated" th:if="${data.user.userID}!=100" th:text="${#dates.format(data.user.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                                    <td th:if="${data.user.userID}!=100" th:text="${data.user.mail}" class="text-md-center"></td>
                                    <td th:if="${data.user.userID}!=100" th:text="${data.user.tel}" class="text-md-center"></td>
                                    <td th:if="${data.user.userID}!=100" th:text="${data.userGroup.groupName}" class="text-md-center"></td>
                                    <td class="text-md-center" th:if="${data.user.userID}!=100">
                                        <button class="btn btn-primary userEdit" data-toggle="modal"
                                                data-target="#UpdateUser">修改
                                        </button>
                                        <button th:attr="del_uri=@{/user/delete/}+${data.user.userID}"
                                                class="btn btn-danger delete" data-toggle="modal"
                                                data-target="#DeleteUser">删除
                                        </button>
                                    </td>
                                </tr>
                                <!--<tr>-->
                                <!--<td><p>2</p></td>-->
                                <!--<td><p>dragon</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td>桥梁监测组</td>-->
                                <!--<td>-->
                                <!--<a href="# " class="btn btn-primary">修改</a>-->
                                <!--<a href="# " class="btn btn-primary">删除</a>-->
                                <!--</td>-->
                                <!--</tr>-->
                                <!--<tr>-->
                                <!--<td><p>3</p></td>-->
                                <!--<td><p>dragon</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td>桥梁监测组</td>-->
                                <!--<td>-->
                                <!--<a href="# " class="btn btn-primary">修改</a>-->
                                <!--<a href="# " class="btn btn-primary">删除</a>-->
                                <!--</td>-->
                                <!--</tr>-->
                                <!--<tr>-->
                                <!--<td><p>4</p></td>-->
                                <!--<td><p>dragon</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td>桥梁监测组</td>-->
                                <!--<td>-->
                                <!--<a href="# " class="btn btn-primary">修改</a>-->
                                <!--<a href="# " class="btn btn-primary">删除</a>-->
                                <!--</td>-->
                                <!--</tr>-->
                                <!--<tr>-->
                                <!--<td><p>5</p></td>-->
                                <!--<td><p>dragon</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td>桥梁监测组</td>-->
                                <!--<td>-->
                                <!--<a href="# " class="btn btn-primary">修改</a>-->
                                <!--<a href="# " class="btn btn-primary">删除</a>-->
                                <!--</td>-->
                                <!--</tr>-->
                                <!--<tr>-->
                                <!--<td><p>6</p></td>-->
                                <!--<td><p>dragon</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td><p class="was-validated">2019/01/11</p></td>-->
                                <!--<td>桥梁监测组</td>-->
                                <!--<td>-->
                                <!--<a href="# " class="btn btn-primary">修改</a>-->
                                <!--<a href="# " class="btn btn-primary">删除</a>-->
                                <!--</td>-->
                                <!--</tr>-->
                                </tbody>
                            </table>
                            <form id="deleteUserForm" method="post">
                                <input type="hidden" name="_method" value="delete"/>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="~{index::footer}"></div>
</div>
</div>
</div>
<!-- Modal -->
<!-- AddUserModal-->
<div class="modal fade" id="AddUser" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <span class="glyphicon glyphicon-user"></span>
                <h6 class="modal-title">
                    增加用户</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="addForm" method="post" action="/user/add">
                    <div class="form-group">
                        用户名：<input type="text" class="form-control" name="UserAccount" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        姓名：<input type="text" class="form-control" name="UserName" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        所属组：
                        <select class="form-control" name="GroupID" id="group"></select>
                    </div>
                    <div class="form-group">
                        邮箱：<input type="email" class="form-control" name="Mail" placeholder="邮箱">
                    </div>
                    <div class="form-group">
                        电话：<input type="text" class="form-control" name="Tel" placeholder="电话">
                    </div>
                    <div class="form-group">
                        密码：<input type="password" class="form-control" name="PassWd" placeholder="密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="addSubmit">提交</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--UpdateUserModal-->
<div class="modal fade" id="UpdateUser" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h6 class="modal-title"><i class="la la-frown-o"></i> 修改用户</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="updateForm" method="post">
                    <div class="form-group">
                        <input type="hidden" name="_method" value="put"/>
                        <input type="hidden" class="form-control" id="userId" name="UserID">
                    </div>
                    <div class="form-group">
                        用户名：<input type="text" class="form-control" placeholder="用户名" id="userAccount"
                                   name="UserAccount">
                    </div>
                    <div class="form-group">
                        姓名：<input type="text" class="form-control" placeholder="姓名" id="userName" name="UserName">
                    </div>
                    <div class="form-group" >
                        所属组：<select class="form-control" id="editGroup" name="GroupID">
                    </select>
                    </div>
                    <div class="form-group">
                        邮箱：<input type="email" class="form-control" name="Mail" id="mail" placeholder="邮箱">
                    </div>
                    <div class="form-group">
                        电话：<input type="text" class="form-control" name="Tel" id="tel" placeholder="电话">
                    </div>
                    <div class="form-group">
                        密码：<input type="password" class="form-control" name="PassWd" id="passwd" placeholder="密码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="userUpdate">修改</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--DeleteUserModal-->
<!--<div class="modal fade" tabindex="-1" role="dialog" id="DeleteUser">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">确认删除</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <p>确认删除该用户？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认</button>
            </div>
        </div>&lt;!&ndash; /.modal-content &ndash;&gt;
    </div>&lt;!&ndash; /.modal-dialog &ndash;&gt;
</div>&lt;!&ndash; /.modal &ndash;&gt;-->
</body>
<script th:src="@{/assets/js/core/jquery.3.2.1.min.js}"></script>
<script th:src="@{/assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js}"></script>
<script src="/assets/js/core/popper.min.js"></script>
<script src="/assets/js/core/bootstrap.min.js"></script>
<script src="/assets/js/plugin/chartist/chartist.min.js"></script>
<script src="/assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="/assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="/assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="/assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="/assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="/assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="/assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="/assets/js/ready.min.js"></script>
<script src="/assets/js/demo.js"></script>
<script src="/assets/layer/layer.js"></script>
<script src="/assets/js/userlist.js"></script>
</html>